<template>
  <div class>
    <el-container>
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
      <el-header class="head" height=" 60px" width="100%">

        <div class="logo" v-show="sidebarLogo">
          <router-link class="sidebar-logo-link" to="/">
          <h2 class="sidebar-logo">
            Odin7CJ-演示版
          </h2>
            <!-- <img :src="fileHashCode" :onerror="imageErr"  /> -->
          </router-link>
        </div>

        <div class="flex" style="width:100%">
          <!-- 收缩 -->
          <div class="btn" @click="isCollapse = !isCollapse">
            <i class="el-icon-s-unfold" v-show="isCollapse"></i>
            <i class="el-icon-s-fold" v-show="!isCollapse"></i>
          </div>

          <div class="headMenu">
              <head-menu ref="headMenu"></head-menu>
          </div>

          <div class="flex icons">

            <div class="search item">
                <header-search />
            </div>

            <div class="wel item">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  你好，{{user}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="loginOut" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="refresh item" @click="refreshView">
              <el-tooltip effect="light" content="刷新" placement="bottom">
                <i class="iconfont iconshuaxin"></i>
              </el-tooltip>
            </div>

            <!-- 消息模块，暂时隐藏 -->
            <!--
            <div class="message item" style="line-height:25px;" @click="toMessage">1-7
                <el-tooltip effect="light" content="消息" placement="bottom">
                   <el-badge :value="count">
                   <i class="iconfont iconxinxi"></i>
                </el-badge>
            </el-tooltip>
            </div>
            -->

            <div class="set item" @click="set_show = !set_show ">
              <el-tooltip effect="light" content="设置" placement="bottom">
                <i class="iconfont iconshezhi" />
              </el-tooltip>
            </div>

          </div>
        </div>
      </el-header>
      <el-container>

        <el-aside class="silder" width="auto">
          <silder></silder>
        </el-aside>

        <el-main>
          <div class="histry card" v-show="showHistry">
            <div class="arrow left" @click="scrollLeft">
              <i class="el-icon-caret-left"></i>
            </div>
            <div class="histryBox" ref="tags">
              <tags-view />
            </div>
            <div class="arrow right" @click="scrollRight">
              <i class="el-icon-caret-right"></i>
            </div>
          </div>
          <div class="main">
            <router-view v-if="showView" />
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- WebSocket 模块，暂时隐藏 -->
    <!--
    <WebSocket ref="myWebSocket" @getCount="getCount"></WebSocket>
    -->
  </div>
</template>
<script>
// import { getLogoUrl } from "./functions";
import silder from "./components/silder/silder.vue";
import TagsView from "./components/TagsView/index";
import RightPanel from "./components/settings/RightPanel";
import Settings from "./components/settings/index";

import headMenu from "./components/headMenu/index";
import HeaderSearch from "./components/HeaderSearch/index";
//import WebSocket from "./components/websocket/index.vue";

export default {
  components: {
    silder,
    TagsView,
    RightPanel,
    headMenu,
    HeaderSearch,
    // WebSocket,
    Settings
  },
  data() {
    return {
      imageErr: 'this.src="' + require("@/assets/images/logo.png") + '"',
      showView: true,
      isCollapse: false,
      showSettings: true,
      userId: "",
      count: 0,
      fileHashCode: "@/assets/images/demo_logo.png"
    };
  },
  mounted() {
    /**
    getLogoUrl().then(res => {
      console.log(res);
      // fileHashCode
      if (res.retHead.code == "0000000") {
        let token = sessionStorage.getItem("token");
        this.fileHashCode =
          this.baseURL +
          "/api/file/downloadFile/" +
          res.retBody[0].fileHashCode +
          "?Auth-User-Token=" +
          token;
      }
    });
     */
  },
  computed: {
    set_show: {
      get: function() {
        return this.$store.state.settings.set_show;
      },
      set: function(nv) {
        this.$store.commit("set_show", nv);
      }
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      }
    },
    showHistry: {
      get: function() {
        return this.$store.state.settings.showHistry;
      },
      set: function(nv) {
        this.$store.commit("showHistry", nv);
      }
    },
    routers: function() {
      return this.$store.state.tagsView.visitedPath[
        this.$store.state.tagsView.visitedPath.length - 1
      ].meta.title;
    },
    user: function() {
      let userData = JSON.parse(sessionStorage.getItem("user"));
      this.userId = userData.id;
      return userData.realName;
    }
  },
  watch: {
    sidebarLogo: function() {
      this.$nextTick(() => {
        this.$refs.headMenu.watchMenu();
      });
    },

    "$store.state.tagsView.visitedPath": function(v) {
      this.$nextTick(() => {
        this.$refs.tags.scrollLeft = this.$refs.tags.childNodes[0].scrollWidth;
      });
    },
    showHistry: v => {
      let main = document.getElementsByClassName("main")[0];

      let bt = document.body.offsetHeight;
      if (v) {
        main.style.height = bt - 122 + "px";
      } else {
        main.style.height = bt - 80 + "px";
      }

      console.log(main.style.height);
    },
    isCollapse: function(v) {
      this.$store.commit("isCollapse", v);
    }
  },
  methods: {
    refreshView() {
      this.showView = false; // 通过v-if移除router-view节点
      this.$nextTick(() => {
        this.showView = true; // DOM更新后再通过v-if添加router-view节点
      });
    },
    /**
    toMessage() {
      // 点击消息图标进入未读消息列表
      this.$router.push("/mess/receive");
      this.refreshView();
    },
     */
    getCount(v) {
      this.count = v;
    },
    scrollRight() {
      this.$refs.tags.scrollLeft += 300;
    },
    scrollLeft() {
      this.$refs.tags.scrollLeft -= 300;
    },
    handleCommand(command) {
      if (command == "loginOut") {
        this.loginOut();
      }
    },
    loginOut() {
      // add by zhujq 该用户关闭已存在的websocket连接
      // this.$refs.myWebSocket.disconnect(this.userId);
      sessionStorage.removeItem("token");
      this.$store.commit("visitedPathReset");
      this.$store.commit("showHistry", true);
      this.$store.commit("sidebarLogo", true);
      this.$store.commit("indexTool", false);
      this.$store.commit("isCollapse", false);

      sessionStorage.removeItem("user");
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="scss" scoped>
// .logo {
//   height: 100%;
//   .sidebar-logo-link {
//     height: 100%;
//     .sidebar-logo {
//       height: 100%;
//       min-width: 200px;
//       max-width: 360px;
//     }
//   }
// }
.logo {
  height: 100%;
  .sidebar-logo {
      height: 100%;
      white-space: nowrap;
      padding: 0 20px;
      margin: 0;
      color:#304156
      // min-width: 200px;
      // max-width: 360px;
    }
}

.head {
  display: flex;
  // justify-content: space-between;
  background-color: #fff;
  line-height: 60px;
  border-bottom: 1px solid #ddd;
}
.loginOut {
  cursor: pointer;
}
.silder {
  height: calc(100vh - 60px);
  background-color: #304156;
}
.btn {
  min-width: 64px;
  text-align: center;
  cursor: pointer;
  color: #304156;
  font-size: 30px;
  line-height: 60px;
}
.headMenu {
  width: calc(100% - 300px);
}
.histry {
  padding: 4px 10px;
  display: flex;
}
.histryBox {
  height: 34px;
  width: 100%;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
}
.histryBox::-webkit-scrollbar {
  width: 0;
  height: 0px;
  // border-radius: 3px;
}
.flex {
  align-items: center;
  // justify-content: flex-end;
  justify-content: space-between;
  // min-width: 540px;
}
.routers {
  background-color: #fff;
  font-weight: 700;
  color: #666;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-left: 3px solid #000;
  margin: 0 20px;
  margin-top: 5px;
  border-radius: 4px;
  padding-left: 20px;
}
.main {
  margin: 0 10px;
  margin-top: 10px;
  height: calc(100vh - 124px);
  background-color: #fff;
  overflow: auto;
  position: relative;
}
.fixedT {
  height: 54px;
}
.foot {
  border-top: 1px solid #ccc;
  line-height: 60px;
}
.icons {
  max-width: 300px;
  align-items: center;
  .item {
    cursor: pointer;
    i {
      font-size: 20px;
    }
    /deep/.el-badge__content.is-fixed {
      top: 15px;
    }
  }
}

.arrow {
  // box-shadow: 2px 2px 2px #ccc;
  // border: 1px solid #c1c1c1;
  cursor: pointer;
  line-height: 34px;
  width: 30px;
  height: 32px;
  text-align: center;
  // margin: 0 10px;
}
.arrow:active,
.arrow:hover {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}
</style>
